<template>
	<div class="wos-table">
		<table :class="status === 'mini' ? 'mini-table-height' : 'table-height'">
			<thead>
				<tr>
					<th v-for="(th, index) in record.thead" :key="index" :class="th.type === 'Checkbox' ? 'checkbox-width' : ''">
						<span v-if="th.type === 'String'">{{th.name}}</span>
						<span v-else-if="th.type === 'Checkbox'">
							<input type="checkbox" :checked="allChecked" @click="allChecked = !allChecked"/>
						</span>
						<span v-else-if="th.type === 'HTML'" v-html="th.name"></span>
					</th>
				</tr>
			</thead>
			<tbody :class="status === 'mini' ? 'mini-tbody-height' : 'tbody-height'">
				<tr v-for="(tr, index) in record.tbody" :key="index" @dblclick="show(tr)">
					<td
							v-for="(td, order) in tr" :key="order"
							:class="td.type === 'Checkbox' ? 'checkbox-width' : ''"
							@click="userClick(td.click, tr)"
					>
						<span v-if="td.type === 'String'">{{td.value}}</span>
						<span v-else-if="td.type === 'Now'">{{nowTime}}</span>
						<span v-else-if="td.type === 'Checkbox'">
							<input type="checkbox" value="td.value" :checked="allChecked"  />
						</span>
						<span v-else-if="td.type === 'Icon'">
							<i class="iconfont" :class="td.value"></i>
						</span>
						<span v-else-if="td.type === 'Select'">
							<select>
								<option value="" v-for="(i, index) in td.value" :key="index">{{i}}</option>
							</select>
						</span>
						<span v-else-if="td.type === 'orderbydesc'">
							{{index+1}}
						</span>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="footer" v-if="status !== 'mini'">
			<div v-html="tfood"></div>
		</div>
	</div>
</template>

<script>
    export default {
        name: "wos-table",
	    data:function(){
          return {
              allChecked:false,
	          orderId:1
          }
	    },
	    computed:{
            //返回当前时间
            nowTime:function(){
                const myDate = new Date;
                const year = myDate.getFullYear();//获取当前年
                const month = myDate.getMonth()+1;//获取当前月
                const date = myDate.getDate();//获取当前日
                const hour = myDate.getHours();//获取当前小时数(0-23)
                const minute = myDate.getMinutes();//获取当前分钟数(0-59)
                const second = myDate.getSeconds();//获取当前秒
                return `${year}-${month}-${date}   ${hour}:${minute}:${second}`
            }
	    },
	    props:[
            "record",
		    "status",
		    "tfood"
	    ],
        mounted() {

        },
	    methods:{
            show(obj){
                this.$emit("show",obj)
            },
            userClick(parentMethodsName, obj){
                //传参中间件
                this.$store.state.param = obj
                this.$emit(parentMethodsName)

            }
	    }
    }
</script>

<style scoped lang="less">
	.table-height{
		height: 550px;
	}
	.tbody-height{
		height:520px;
	}
	.mini-table-height{
		/*height: 200px;*/
	}
	.mini-tbody-height{
		/*height: 200px;*/
	}
	.checkbox-width{
		width: 50px;
	}
</style>
